<template>
  <div class="index-container">
    <div class="page-head">
      <vab-list-notice :content-array="contentArray" />
      <vab-query-form>
        <vab-query-form-left-panel :span="18">
          <el-button
            v-permissions="{ permission: ['CustomValidAdd:CustomValid'] }"
            :icon="Plus"
            type="primary"
            @click="handleAdd"
          >
            添加
          </el-button>
          <el-button
            v-permissions="{ permission: ['CustomValidExport:CustomValid'] }"
            :icon="Upload"
            type="primary"
            @click="handleExport"
          >
            导出模板
          </el-button>
          <el-button
            v-permissions="{ permission: ['CustomValidImport:CustomValid'] }"
            :icon="Download"
            type="primary"
            @click="handleAdd"
          >
            导入客源
          </el-button>
          <el-button
            v-permissions="{ permission: ['CustomValidInvalid:CustomValid'] }"
            :icon="Clock"
            type="warning"
            @click="updateStateBatch"
          >
            等待审核
          </el-button>
          <el-button
            v-permissions="{ permission: ['CustomValidDrop:CustomValid'] }"
            :icon="CircleCheck"
            type="warning"
            @click="handleDrop($event)"
          >
            通过审核
          </el-button>
          <el-button
            v-permissions="{ permission: ['CustomValidDrop:CustomValid'] }"
            :icon="CircleClose"
            type="warning"
            @click="handleDrop($event)"
          >
            未通过审核
          </el-button>
          <el-button
            v-permissions="{ permission: ['CustomValidDelete:CustomValid'] }"
            :icon="Delete"
            type="danger"
            @click="handleDelete($event)"
          >
            批量删除
          </el-button>
        </vab-query-form-left-panel>
      </vab-query-form>
    </div>
    <div class="page-content">
      <div class="page-search">
        <vab-query-form>
          <vab-query-form-top-panel>
            <el-form-item>
              <el-input v-model="queryForm.username" placeholder="客户名称" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="queryForm.mobile" placeholder="客户电话" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="queryForm.min_age" placeholder="最小年龄" />
            </el-form-item>
            <el-form-item>
              <el-input v-model="queryForm.max_age" placeholder="最大年龄" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.gender" placeholder="客户性别">
                <el-option
                  v-for="item in genderArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.marry" placeholder="客户婚况">
                <el-option
                  v-for="item in marryArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.education" placeholder="客户学历">
                <el-option
                  v-for="item in educationArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.state" placeholder="审核状态">
                <el-option label="待审" :value="1" />
                <el-option label="有效" :value="2" />
                <el-option label="无效" :value="3" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.makerid" placeholder="分派跟进">
                <el-option
                  v-for="item in makerList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.bind" placeholder="入库情况">
                <el-option label="未入库" :value="1" />
                <el-option label="已入库" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.inputid" placeholder="录入人">
                <el-option
                  v-for="item in inputList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.sourcefrom" placeholder="客户来源">
                <el-option
                  v-for="item in sourcefromArr"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="queryForm.intention" placeholder="客户意向">
                <el-option
                  v-for="item in intentionArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                :icon="Search"
                native-type="submit"
                type="primary"
                @click="queryData"
              >
                查询
              </el-button>
            </el-form-item>
          </vab-query-form-top-panel>
        </vab-query-form>
      </div>

      <el-table
        v-loading="listLoading"
        :data="list"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
          width="55"
        />
        <el-table-column align="center" label="ID" prop="id" width="55" />
        <el-table-column align="left" label="客户信息" width="480">
          <template #default="{ row }">
            <div class="list-item">
              <div class="list-item-meta">
                <el-image
                  style="width: 100px; height: 100px"
                  src="https://qiniu.moudian520.com/default/image_65e58a4c203e5907cb997b1b0724071c.jpeg"
                />
              </div>
              <div class="list-item-meta">
                <div class="list-item-meta-name">
                  {{ row.username }}
                  <vab-icon
                    v-if="row.gender === 1"
                    icon="men-line"
                    style="margin-left: 4px; color: #72c7d1"
                  />
                  <vab-icon
                    v-else
                    icon="women-line"
                    style="margin-left: 4px; color: #eb9582"
                  />
                </div>
                <div class="list-item-meta-age">
                  <div>编号:56565565</div>
                  <div>年龄:{{ row.age }}</div>
                  <div>身高:170cm</div>
                  <div>民族:汉族</div>
                </div>
                <div class="list-item-meta-time">
                  <div>籍贯:吉林省长春市南关区</div>
                  <div>现居:山东省青岛市市南区</div>
                </div>
                <div class="list-item-meta-btn">
                  <el-button
                    v-permissions="{
                      permission: ['CustomValidBase:CustomValid'],
                    }"
                    type="success"
                    size="small"
                    plain
                    @click="handleCat(row, 'baseData')"
                  >
                    详细资料
                  </el-button>

                  <el-button
                    v-permissions="{
                      permission: ['CustomValidFollow:CustomValid'],
                    }"
                    type="success"
                    size="small"
                    plain
                    @click="handleCat(row, 'followLogs')"
                  >
                    服务跟进
                  </el-button>

                  <el-button
                    v-permissions="{
                      permission: ['CustomValidFollow:CustomValid'],
                    }"
                    type="success"
                    size="small"
                    plain
                    @click="handleCat(row, 'followLogs')"
                  >
                    超级管理
                  </el-button>
                  <el-button
                    v-permissions="{
                      permission: ['CustomValidFollow:CustomValid'],
                    }"
                    type="success"
                    size="small"
                    plain
                    @click="handleCat(row, 'followLogs')"
                  >
                    删除
                  </el-button>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="跟进"
          prop="input_name"
          show-overflow-tooltip
        >
          <p>从未跟进</p>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          prop="input_name"
          show-overflow-tooltip
        >
          <el-tag type="warning" effect="light" round>公开相亲</el-tag>
        </el-table-column>
        <el-table-column
          align="center"
          label="实名"
          prop="input_name"
          show-overflow-tooltip
        >
          <p>未实名</p>
        </el-table-column>

        <el-table-column
          align="center"
          label="服务红娘"
          prop="makerid"
          width="120"
        >
          <template #default="{ row }">
            <el-select v-model="row.makerid" placeholder="请选择">
              <el-option
                v-for="item in makerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核" prop="status" width="120">
          <template #default="{ row }">
            <el-select
              v-model="row.status"
              placeholder="请选择"
              @change="updateStatus($event, row.id)"
            >
              <el-option
                v-for="item in statusArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="注册时间"
          fixed="right"
          width="200"
          prop="title"
          show-overflow-tooltip
        >
          <p>公海入库</p>
          <p>2024-08-20 13:20:35</p>
        </el-table-column>

        <template #empty>
          <el-empty class="vab-data-empty" description="暂无数据" />
        </template>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.page"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <MemberDrawer
        ref="editRef"
        :items="areaOptions"
        @fetch-data="fetchData"
      />
      <DetailDrawer ref="catRef" :items="areaOptions" @fetch-data="fetchData" />
    </div>
  </div>
</template>

<script>
  import VabListNotice from '@/plugins/VabListNotice'
  import {
    getList,
    doState,
    doStatus,
    doIntention,
    doDrow,
    doDelete,
  } from '@/api/custom'
  import { getAreaList } from '@/api/area'
  import {
    Search,
    Plus,
    Upload,
    Download,
    Clock,
    CircleCheck,
    CircleClose,
    Delete,
  } from '@element-plus/icons-vue'
  import MemberDrawer from './components/memberDrawer'
  import DetailDrawer from './components/detailDrawer'
  export default defineComponent({
    name: 'MemberData',
    components: { VabListNotice, MemberDrawer, DetailDrawer },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        editRef: null,
        catRef: null,
        exportRef: null,
        list: [],
        listLoading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          page: 1,
          pageSize: 10,
        },
        contentArray: [
          '公海客源是指您广泛通过各种渠道获取到的单身潜在客户基本信息以快速便捷的形式收集汇总到本系统中，方便销售或红娘进行査阅、跟进和管理;',
          '由平台工作人员/销售/红娘对所分派的客户资源进行跟进服务，根据业务进展情况可将客户资料一健入库转入到正式的会员资料中并自动注册用户;',
          '入库的客户信息在本页面中仅做记录查询，请在会员资料中管理，本页不再提供编辑和任何操作;制除客源记录不影响会员资料中的数据。',
        ],
        genderArr: [],
        marryArr: [],
        educationArr: [],
        stateArr: [
          {
            label: '待审',
            value: 0,
          },
          {
            label: '有效',
            value: 1,
          },
          {
            label: '无效',
            value: 2,
          },
        ],
        statusArr: [
          {
            label: '未设置',
            value: 0,
          },
          {
            label: '微信邀约中',
            value: 1,
          },
          {
            label: '电话邀约中',
            value: 2,
          },
          {
            label: '联系不上',
            value: 3,
          },
          {
            label: '恋爱中',
            value: 4,
          },
          {
            label: '已到店',
            value: 5,
          },
        ],

        makerList: [
          {
            label: '待分派',
            value: 0,
          },
        ],

        inputList: [],

        intentionArr: [
          {
            label: '未设置',
            value: 0,
          },
        ],

        sourcefromArr: [],
      })

      onMounted(() => {
        fetchData()
        areaData()
        const params = localStorage.getItem('params')
        const jsonParams = JSON.parse(params)
        state.genderArr = Object.values(jsonParams.gender)
        state.marryArr = Object.values(jsonParams.marry)
        state.educationArr = Object.values(jsonParams.education)
        state.intentionArr = state.intentionArr.concat(
          Object.values(jsonParams.intention)
        )
        state.sourcefromArr = Object.values(jsonParams.sourcefrom)
      })

      const areaOptions = ref([])

      const areaData = async () => {
        const data = await getAreaList()
        areaOptions.value.push(...data.data)
      }

      const fetchData = async () => {
        try {
          state.listLoading = true
          const {
            data: { list, total },
          } = await getList(state.queryForm)
          state.list = list
          state.total = total
          state.listLoading = false
        } catch (e) {
          $baseMessage(e.message, 'error', 'vab-hey-message-error')
        }
      }

      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.page = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.page = 1
        fetchData()
      }

      const setSelectRows = (val) => {
        state.selectRows = val
      }

      const handleAdd = () => {
        state['editRef'].showEdit()
      }

      const handleExport = () => {
        state['exportRef'].showExport()
      }

      const handleCat = (row, type) => {
        state['catRef'].showCat(row, type)
      }

      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      //放弃入海
      const handleDrop = (row) => {
        if (row.id) {
          $baseConfirm(
            '放弃入海后该客户的红娘分配改为“待分配”，所有红娘可以在“弃海客源”中进行捞取',
            null,
            async () => {
              const { msg } = await doDrow({
                ids: row.id,
              })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            }
          )
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm(
              '放弃入海后选中客户的红娘分配改为“待分配”，所有红娘可以在“弃海客源”中进行捞取',
              null,
              async () => {
                const { msg } = await doDrow({ ids })
                $baseMessage(msg, 'success', 'vab-hey-message-success')
                await fetchData()
              }
            )
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }

      //批量更新审核
      const updateStateBatch = async () => {
        if (state.selectRows.length > 0) {
          try {
            const ids = state.selectRows.map((item) => item.id).join()
            const { msg } = await doState({ ids, state: 2 })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          } catch (e) {
            $baseMessage(msg, 'error', 'vab-hey-message-error')
          }
        } else {
          $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
        }
      }

      //更新审核
      const updateState = async (event, id) => {
        try {
          const { msg } = await doState({
            ids: id,
            state: event,
          })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          await fetchData()
        } catch (e) {
          $baseMessage(msg, 'error', 'vab-hey-message-error')
        }
      }

      //更新状态
      const updateStatus = async (event, id) => {
        try {
          const { msg } = await doStatus({
            id: id,
            status: event,
          })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          await fetchData()
        } catch (e) {
          $baseMessage(msg, 'error', 'vab-hey-message-error')
        }
      }

      //更新意向
      const updateIntention = async (event, id) => {
        try {
          const { msg } = await doIntention({
            id: id,
            intention: event,
          })
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          await fetchData()
        } catch (e) {
          $baseMessage(msg, 'error', 'vab-hey-message-error')
        }
      }

      return {
        ...toRefs(state),
        handleSizeChange,
        handleCurrentChange,
        queryData,
        setSelectRows,
        fetchData,
        handleAdd,
        handleExport,
        handleCat,
        handleDelete,
        updateStateBatch,
        updateState,
        updateStatus,
        updateIntention,
        handleDrop,
        areaOptions,
        Search,
        Plus,
        Upload,
        Download,
        Clock,
        CircleCheck,
        CircleClose,
        Delete,
      }
    },
  })
</script>

<style lang="scss" scoped>
  $base: '.index';
  #{$base}-container {
    background: $base-color-background !important;
    padding: 0 !important;
  }
  .index-container {
    .page-head {
      padding: $base-padding $base-padding 0 $base-padding;
      margin-bottom: $base-margin;
      background: var(--el-color-white);
      border: 1px solid #ebeef5;
    }

    .page-content {
      .page-search {
        .el-select {
          width: 212px;
        }

        .el-input {
          width: 212px;
          border-left: 1px solid #e2ecfa;
          border-radius: 30px;
        }
      }
      // 这里的height变量是从mixin中获取的
      height: calc(100% - var(--height));
      background-color: #fff;
      margin-top: 16px;
      padding: 16px;
      border-radius: 4px;
    }
    .button-container {
      .el-button {
        padding: 5px;
      }
    }

    .list-item {
      display: flex;

      &-avatar {
        width: 60px;
        height: 60px;
        border-radius: 6px;
      }

      &-meta {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin-left: 10px;

        &-name {
          font-size: 14px;
          font-weight: 600;
          display: flex;
          align-items: center;

          &-sexicon {
            width: 16px;
            height: 16px;
            margin-left: 3px;
          }
        }

        &-age {
          display: flex;
          font-size: 14px;
          color: rgb(0 0 0 / 45%);
          div:nth-child(n + 1) {
            margin-right: 10px;
          }
        }

        &-time {
          display: flex;
          font-size: 14px;
          color: rgb(0 0 0 / 45%);
          div:nth-child(n + 1) {
            margin-right: 10px;
          }
        }

        &-btn {
          display: flex;
          font-size: 14px;
          color: rgb(0 0 0 / 45%);
          margin-top: 5px;
        }
      }
      &-desc {
        &-content {
          font-size: 14px;

          > span {
            text-align: left;
          }
        }
      }
    }
  }
</style>
